<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // js 中的 Proxy 
        // proxy 代理 
        // 用法
        //  let d=new Proxy(target,handle)
        // 两个参数 第一个是要拦截的目标对象 第二个参数也是一个对象 用来定制拦截行为
        // 理解
        // 在目标对象之前架设一层拦截，外界访问改对象，都必须先通过这层拦截
        // 因此可以对外界的访问进行过滤和改写


        let proxy = new Proxy({}, {
            get: function (target, property) {
                return 33
            }
        })
        console.log(proxy); //33

        // get操作   
        // handle get 接收三个参数 
        // 分别为 get(target,propKey,receiver) 目标对象，属性名 和实例本身(操作行为所针对的对象)可选
        let obj = { name: "name", age: 18 }
        let proxyObj = new Proxy(obj, {
            get(target, attr, receiver) {
                console.log(receiver, 'receiver'); //Proxy {name: 'name', age: 18} 'receiver'
                console.log(target, attr, target[attr]); //{name: 'name', age: 18} 'name' 'name'
                return target[attr]
            },
        })
        console.log(proxyObj.name); //name

        // set 操作
        // 一般用于对于要复制的数进行过滤或者加工
        // 
        let objSet = {
            age: 100
        }
        let proxySet = new Proxy(objSet, {
            get(target, attr) {
                return target[attr]
            },
            set(target, attr, value) {
                target[attr] = value;
                (function () {
                    console.log('value change');
                })()
            }
        })
        proxySet.age = 200
        console.log(objSet);

        const user = {
            name: 'wangly19',
            age: 22,
            description: '一名掉头发微乎其微的前端小哥。'
        }

        console.log('change age before', Reflect.get(user, 'age'))

        const hasChange = Reflect.set(user, 'age', 23)
        console.log('set user age is done? ', hasChange ? 'yes' : 'no')

        console.log('change age after', Reflect.get(user, 'age'))

        const hasDelete = Reflect.deleteProperty(user, 'age')

        console.log('delete user age is done?', hasDelete ? 'yes' : 'none')

        console.log('delete age after', Reflect.get(user, 'age'))
    </script>
</body>

</html>